<template>
  <div class="card-box">
    <div class="card-box">
      <div class="card-title">退租信息</div>
      <el-form ref="form" class="form-wrap" size="small" :model="formData">
        <el-form-item label="终止类型" prop="endType">
          <span>{{endType}}</span>
        </el-form-item>
        <el-form-item label="退租日期" prop="backDate">{{formData!=null?formData.backDate:""}}</el-form-item>
        <el-form-item label="退租人" prop="backPerson">{{formData!=null?formData.backPerson:""}}</el-form-item>
        <el-form-item label="退租人证件号" prop="certificateNum">
          <span>{{formData!=null?formData.backCertificateNum:""}}</span>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <span>{{formData!=null?formData.remarks:""}}</span>
        </el-form-item>
        <el-form-item label="是否已结清费用" prop="feeComplete">
          <span>{{formData!=null?(formData.feeComplete==1?"已结清":"未结清"):""}}</span>
        </el-form-item>
      </el-form>
      <div class="card-title">附件</div>
      <el-row :gutter="20">
        <el-col>
          <upload-media type="file" ref="myUpload" modelType="lessor-contract" :isShowFileList="true" :isView="true"></upload-media>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import uploadMedia from '@/components/upload-media'
import { getContractBack } from '@/views/wy-lessor/rentalSociety/api/contract.js'

export default {
  name: "contract-back-view",
  components: { uploadMedia },
  data () {
    return {
      //dialogVisible: false,
      //合同终止类型，下拉值
      //contractEndType:[],
      lessorContractBackId: "",
      endType: "",
      formData: {
        lessorContractBackId: null,
        endType: null,
        backDate: null,
        backPerson: null,
        backCertificateNum: "",
        remarks: "",
        feeComplete: 0
      },
      fileList: [],

    }
  },

  computed: mapState({
    //调价方式
    contractEndType: state => {
      let data = state.dict.find(item => item.type === "contract_end_type") || {};
      return data.children || [];
    }
  }),
  methods: {
    //加载数据
    loadBackInfo (contractId) {

      let lessorContractId = contractId;//this.$route.query.id;
      getContractBack(lessorContractId).then(
        response => {
          //alert(response)
          if (response.data.code == 0) {

            this.formData = response.data.data;

            for (var j = 0, len = this.contractEndType.length; j < len; j++) {
              if (this.formData != null && this.contractEndType[j].value == this.formData.endType) {
                this.endType = this.contractEndType[j].label;
              }
            }

            //加载退租附件
            if (this.formData != null) {
              this.$refs.myUpload.getFiles(this.formData.lessorContractBackId);
            }


          } else {
            this.$alert("读取合同退租信息返回错误：" + response.data.code + response.data.message);
          }
        }
      )
    }
  }
}


</script>
<style scoped lang="scss">
@include formWrap();
</style>
